<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->

    <div class="filter-container">
      <!-- style="width: 150px;margin-right:15px;" -->
        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px"
            :style="{ width: inputWid(param.username) }"
            v-model="param.username"
            placeholder="操作用户"
        ></el-input>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.operation"
            placeholder="操作类型"
        ></el-input>

        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button
            type="button"
            v-waves
            class="el-button el-button--warning"
            @click="cancelSubmit"
        >
        重置</el-button>

    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="操作用户"  prop="username" align="center"/>
      <el-table-column label="操作类型"  prop="operation" align="center"/>
      <el-table-column label="客户端IP"  prop="ip" align="center"/>
      <el-table-column label="操作时间"  prop="timestamp" align="center"/>
      <el-table-column label="耗时(毫秒)"  prop="duration" align="center"/>
      <el-table-column label="返回参数"  prop="jsonResult" align="center" width="230"/>
      <el-table-column label="操作状态"  prop="status" align="center">
        <template slot-scope="scope" >
          {{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '异常' : '-'}}
        </template>
      </el-table-column>
      <el-table-column label="错误信息"  prop="errorMsg" align="center"/>
      <el-table-column label="操作" fixed="right" align="center" width="130">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">查看</el-button>
                </div>
            </template>
      </el-table-column>
    </el-table>

    <!-- 修改数据弹窗 -->
    <el-dialog
      title="查看"
      :visible.sync="showupd"
      @close="showupd = false"
      width="60%"
    >
    <el-descriptions title="" direction="vertical" :column="4">
        <el-descriptions-item label="操作用户" size="small">{{ updForm.username }}</el-descriptions-item>
        <el-descriptions-item label="操作类型" size="small">{{ updForm.operation }}</el-descriptions-item>
        <el-descriptions-item label="客户端IP">{{ updForm.ip }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ updForm.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="耗时(毫秒)">{{ updForm.duration }}</el-descriptions-item>
        <el-descriptions-item label="操作状态">{{ updForm.status == 0 ? '正常' : updForm.status == 1 ? '异常' : '-' }}</el-descriptions-item>
        <el-descriptions-item label="错误信息">{{ updForm.errorMsg ? updForm.errorMsg : '无' }}</el-descriptions-item>
        <el-descriptions-item label="调用方法">{{ updForm.method }}</el-descriptions-item>
        <!-- <el-descriptions-item label="返回参数">{{ updForm.jsonResult }}</el-descriptions-item>
        <el-descriptions-item label="请求参数">{{ updForm.params }}</el-descriptions-item> -->
    </el-descriptions>
        <el-form :inline="true" :model="updForm" ref="updForm" :rules="addRules">
            <el-form-item label="调用方法" prop="method" >
                <el-input v-model="updForm.method" type="textarea" disabled autosize  style="width: 700px"/>
            </el-form-item>
            <el-form-item label="请求参数" prop="params" >
                <el-input v-model="updForm.params" type="textarea" disabled autosize style="width: 700px"/>
            </el-form-item>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button type="primary">确定</el-button>
        </div>
    </el-dialog>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <!-- <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button> -->

  </div>
</template>

<script>
import { operationLog } from "@/api/processRoute"
export default {
    name: 'operationLog',
    data () {
        return {
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
              username: '',                      
              operation: ''                    
            },
            total: 0,                                      //数据的总数
            tableInfo: [],
            loadingList: false,
            loading: false,
            updForm: {},
            props: { multiple: true },
            // 表单校验
            addRules: {
            },
            showupd: false,
            userInfo: this.$store.state.user.userInfo,
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(this.param.username){ query.username = this.param.username}
            if(this.param.operation){ query.operation = this.param.operation}
            let data = await operationLog(query)
            let errmsg = data.msg
            this.loadingList = false
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errmsg)
            this.total = data.data.count
            this.tableInfo = data.data.list
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            code: '条码',
            content: '点检内容',
            jobNumber: '配置人员',
            pdateTime: '修改时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          if(this.param.username){ query.username = this.param.username}
          if(this.param.operation){ query.operation = this.param.operation}
          let arr = await operationLog(query)
          if(arr.code == '500') return
          if(arr.code != '1'){
            this.loading = false
            return this.$message.error(errmsg)
          }
          if(!arr.data.list.length){
            this.loading = false
            this.$message.error('暂无数据')
          }
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '检点/保养项目', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              code: item.code,
              content: item.content,
              jobNumber: item.jobNumber,
              updateTime: item.updateTime,
            }
            arr1.push(obj)
          })
          return arr1
        },
        cancelSubmit(){
            this.param = {  }
            this.listQuery.page = 1
            this.handleFilter()
        },
        handleEdit(row){
            this.updForm = Object.assign({},row)
            this.showupd = true
        },
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
    }
}
</script>

<style>

.btn-add{
    margin-bottom: 28px;
}

.ul-item{
  width: 85%;
}
</style>
